<template>
  <div class="user-info-wrap">
    <div class="user-info">
      <div class="user-head">
        <div class="head">
          <img class="image" src="@/assets/images/public/user-head.png" alt="">
          <span class="level">v0</span>
        </div>
        <div>
          <span class="name">LSP-123</span>
          <span class="id">ID：567896543</span>
        </div>
      </div>
      <div class="user-right">

        <div class="info-content">
          <Row class="info">
            <Col span="8" class="info-item">
              <span class="text">国家：</span>
              <span class="text">Ca</span>
            </Col>
            <Col span="8" class="info-item">
              <span class="text">手机：</span>
              <span class="text">Ca</span>
            </Col>
            <Col span="8" class="info-item">
              <span class="text">性别：</span>
              <span class="text">Ca</span>
            </Col>
            <Col span="8" class="info-item">
              <span class="text">语言：</span>
              <span class="text">Ca</span>
            </Col>
            <Col span="8" class="info-item">
              <span class="text">生日：</span>
              <span class="text">Ca</span>
            </Col>
          </Row>

          <Row class="">
            <Col span="24">
              <Progress :percent="45" hide-info status="active" />
            </Col>
          </Row>
          <div class="growth-value">
            <div>成长值 0</div>
            <div>距离V1只需要3000个成长值</div>
            <div class="view-growth">查看成长记录</div>
          </div>
        </div>

        <Button class="btn">
           <span class="btn-content">
             <img class="icon" src="@/assets/images/public/edit-icon.png" alt="" />
              <span>编辑</span>
           </span>
        </Button>
      </div>
    </div>
    <div class="edit-info">
      <span class="label">我的尺码信息</span>
      <span class="value">编辑</span>
    </div>
    <div class="content">
      <!--等级-->
      <div class="table-wrap">
        <div class="table">
          <div class="table-header">
            <Row>
              <Col span="3">
                <div class="th">等级特权</div>
              </Col>
              <Col span="3">
                <div class="th">国际运费减免</div>
              </Col>
              <Col span="3">
                <div class="th">保险优惠金额</div>
              </Col>
              <Col span="3">
                <div class="th">增值服务优惠</div>
              </Col>
              <Col span="9">
                <div class="th">免退换货操作费（已用/可用）月</div>
              </Col>
              <Col span="3">
                <div class="th">定制拍照</div>
              </Col>
            </Row>
          </div>
          <div class="table-content">
            <Row class="table-tr tr-active">
              <Col span="3">
                <div class="td">
                  <div>VIP2</div>
                  <div>我的等级</div>
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="9">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
            </Row>
            <Row class="table-tr">
              <Col span="3">
                <div class="td">
                  <div>VIP2</div>
                  <div>我的等级</div>
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="9">
                <div class="td">
                  0%
                </div>
              </Col>
              <Col span="3">
                <div class="td">
                  0%
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>
    <Modal
        width="420px"
        class="pop"
        v-model="modal1"
        title="充值金额">
      <div class="pop-content">
        <span class="hint">*</span>
        <span>充值金额</span>
        <Input class="input" />
        <span>{{ userCurrency.code }}</span>
      </div>
      <div class="pop-footer" slot="footer">
        <Button class="btn" type="primary" long>确定</Button>
        <Button class="btn" @click="modal1 = false" long>
          <span>取消</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "user-info",
  data() {
    return {
      modal1: false
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency
    })
  },
}
</script>

<style scoped lang="less">
.user-info-wrap {
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url("@/assets/images/home/bg.png");
    background-size: cover;
    padding: 30px 40px;
    .user-head {
      display: flex;
      align-items: center;
      .head {
        position: relative;
        margin-right: 20px;
        .image {
          display: block;
          width: 76px;
          height: 76px;
          border-radius: 50%;
        }
        .level {
          position: absolute;
          left: 50%;
          bottom: 0;
          margin-left: -20px;
          width: 40px;
          height: 20px;
          background: #232323;
          border-radius: 90px 90px 90px 90px;
          opacity: 1;
          text-align: center;
          color: @primary-color;
          font-size: 12px;
          border: 1px solid rgba(255,255,255,0.1);
        }
      }
      .name {
        display: block;
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
      }
      .id {
        display: block;
        color: rgba(255,255,255,0.8);
        font-size: 14px;
      }
    }
    .user-right {
      display: flex;
      flex: 1;
      padding-left: 40px;
      .info-content {
        flex: 1;
        .info {
          .info-item {
            margin-bottom: 24px;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
          }
        }
        .growth-value {
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          color: rgba(255,255,255,0.8);
          font-size: 14px;
          .view-growth {
            cursor: pointer;
            text-align: right;
          }
        }
      }
      .btn {
        color: @primary-color;
        min-width: 76px;
        border-radius: 2px;
        margin-left: 16px;
        .btn-content {
          display: flex;
          align-items: center;
        }
        .icon {
          display: block;
          width: 12px;
          margin-right: 2px;
        }
      }
    }

  }
  .edit-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 14px;
    font-weight: 500;
    .label {
      color: @t-title-color;
    }
    .value {
      cursor: pointer;
      color: @primary-color;
    }
  }
  .content {
    margin-top: 32px;
    padding-bottom: 24px;
    .table-wrap {
      margin-top: 32px;
      .table {
        &-header {
          padding: 12px;
          background: @t-table-header-bg;
          .th {
            color: @t-title-color;
            font-size: 14px;
            font-weight: 600;
            .all {
              cursor: pointer;
            }
          }
        }
        &-content {
          border-top: 1px solid @t-table-border-color;
          .table-tr {
            padding: 12px;
            border-bottom: 1px solid @t-table-border-color;
            color: @t-text-color;
            font-size: 14px;
          }
          .tr-active {
            color: @primary-color;
            border-bottom: 1px solid @primary-color;
          }
        }
      }
    }
    .page {
      text-align: right;
      margin-top: 24px;
    }
  }
}
.pop {
  .pop-content {
    display: flex;
    align-items: center;
    color: @t-text-color;
    .hint {
      color: red;
    }
    .input {
      flex: 1;
      margin-left: 12px;
      margin-right: 4px;
    }
  }
  &:deep(.ivu-modal) {
    .pop-footer {
      .btn {
        margin: 0;
        margin-top: 12px;
        &:first-child {
          margin-top: 0;
        }
        .iconfont {
          color: red;
        }
      }
    }
    .ivu-modal-footer {
      border: 0;
    }
  }
}
</style>